<template>
  <div class="app-container">
    <el-row>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm el-form-bottom">
        <div>
          <span>设置为平台佣金，平台承担，设置为商家佣金，商家承担，按照结算时设置为准</span>
          <el-divider></el-divider>
        </div>
        <el-col :span="8">
          <el-form-item label="分销设置" prop="saleSet">
            <el-radio-group v-model="ruleForm.saleSet">
              <el-radio v-for="item in statesList" :key="item.value" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-form-item style="margin-top: 50px;">
          <div class="fixed-bottom-20">
            <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>
<script>
  import {
    getCodeManager,
    codeToArray
  } from "@/api/all"
  import {
    salesetting,
    updateSalesetting
  } from "@/api/sale"
  import {
    Message
  } from 'element-ui'
  import Tinymce from '@/components/Tinymce'
  export default {
    name: "salesetting",
    components: {
      Tinymce
    },
    data() {
      return {
        statesList: [],
        ruleForm: {
          saleSet: ""
        },
        rules: {
          title: [{
            saleSet: true,
            message: "请选择分销设置",
            trigger: "change"
          }]
        },
      };
    },
    created() {
      getCodeManager("SALE_SETTING", () => {
        this.statesList = codeToArray("SALE_SETTING");
      });
      salesetting().then(res => {
        this.ruleForm = res.data.data.saleSetting
        this.ruleForm.saleSet = this.ruleForm.saleSet + ''
      })
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            updateSalesetting(this.ruleForm).then(res => {
              if (!res.data.success) {
                Message.error(res.data.message);
                return;
              }
              Message.success('操作成功')
            })
          }
        });
      }
    }
  }
</script>
<style scoped>
  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  /deep/ [class*=el-col-] {
    float: none;
  }

  .el-divider__text.is-left {
    left: 12px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
</style>
